<template>
  <div class="home-container">
    <van-nav-bar fixed placeholder>
      <!-- 左边插槽 -->
      <template #left>
        <img src="./../../assets/logo.png" alt="" />
      </template>
      <!-- 右边插槽 -->
      <template #right>
        <van-button
          icon="search"
          round
          type="primary"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- tab栏 -->
    <van-tabs v-model="active" @click="onRefresh()">
      <van-tab v-for="item in getChannels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <van-grid :border="false" :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(value, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image :src="value" lazy-load />
                  </van-grid-item>
                </van-grid>
                <div>
                  <span>{{ item.aut_name }}</span
                  >&nbsp; <span>{{ item.comm_count }}</span
                  >&nbsp;
                  <span>{{ item.pubdate | fromNum }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannels, getJournalism } from './home.js'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      list: [], //新闻频道推荐
      loading: false, //上拉动画
      finished: false, //拉完显示数据
      isLoading: false, //下拉动画
      getChannels: [], //tab栏
      timestamp: null
    }
  },
  async created () {
    let res = await getChannels()
    // console.log(res)
    this.getChannels = res.data.data.channels
  },
  methods: {
    async onLoad () {
      if (!this.timestamp) {
        // 获取当前的时间戳
        this.timestamp = Date.now()
      }
      let res = await getJournalism({
        // 获取当前点击的第n个id
        channel_id: this.getChannels[this.active].id,
        // 传入时间戳
        timestamp: this.timestamp
      })
      // 重新储存时间戳
      this.timestamp = res.data.data.pre_timestamp
      // 把新闻数据push到list中
      this.list.push(...res.data.data.results)
      console.log(this.list)
      console.log(res)
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求

      // 加载状态结束
      this.loading = false

      // 数据全部加载完成
      if (this.list.length >= 40) {
        this.finished = true
      }
    },
    onRefresh () {
      // 清空时间戳只有清空时间戳才能获取当前页面
      this.timestamp = null
      //  下拉时清除数据
      this.list = []
      // 重新加载数据
      this.loading = true
      this.finished = false
      // 下拉关闭动画
      this.isLoading = false
      // 调用上面的方法,重新加载页面
      this.onLoad()
    }
  },
  filters: {
    fromNum (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.home-container {
  // tab栏
  .van-nav-bar {
    background: skyblue;
    .van-button {
      height: 30px;
      border: 0;
      background: rgba(255, 255, 255, 0.3);
      .van-icon {
        color: #fff;
      }
    }
    img {
      height: 30px;
    }
  }
  // tab栏
  // 头部
  .van-tabs__wrap {
    width: 100%;
    position: fixed;
    top: 46px;
    z-index: 10;
  }
  // 底部
  .van-tabs__content {
    margin-top: 44px;
  }
}
</style>
